<template>
  <div class="home">
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
          @click="handleClick"
        >
          <a-menu-item key="welcome">
            <MailOutlined />
            <span>欢迎</span>
          </a-menu-item>
          <!-- 遍历分类嵌套的信息 -->
          <a-sub-menu v-for="item in level1" :key="item.id">
            <template v-slot:title>
              <span><user-outlined />{{ item.name }}</span>
            </template>
            <a-menu-item v-for="child in item.children" :key="child.id">
              <MailOutlined /><span>{{ child.name }}</span>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content
        :style="{
          background: '#fff',
          padding: '24px',
          margin: 0,
          minHeight: '280px',
        }"
      >
        <!-- 欢迎提示 -->
        <div v-show="isShowWelcome">
          <the-welcome></the-welcome>
        </div>
        <!-- list列表组件 -->
        <a-list
          v-show="!isShowWelcome"
          item-layout="vertical"
          size="large"
          :grid="{ gutter: 20, column: 3 }"
          :pagination="pagination"
          :data-source="ebooks"
        >
          <template #renderItem="{ item }">
            <a-list-item key="item.name">
              <template #actions>
                <span>
                  <component :is="'FileOutlined'" style="margin-right: 8px" />
                  {{ item.docCount }}
                </span>
                <span>
                  <component :is="'UserOutlined'" style="margin-right: 8px" />
                  {{ item.viewCount }}
                </span>
                <span>
                  <component :is="'LikeOutined'" style="margin-right: 8px" />
                  {{ item.voteCount }}
                </span>
              </template>
              <a-list-item-meta :description="item.description">
                <template #title>
                  <router-link :to="'/doc?ebookId=' + item.id">
                    {{ item.name }}
                  </router-link>
                </template>
                <template #avatar><a-avatar :src="item.cover" /></template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
} from "@ant-design/icons-vue";
//导入axios
import axios from "axios";
import { message } from "ant-design-vue";
import { Tool } from "@/utils/tool";
import TheWelcome from "@/components/the-welcome.vue";

export default defineComponent({
  name: "HomeView",
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
    TheWelcome,
  },
  setup() {
    //变量定义
    const pagination = {
      onChange: (page: number) => {
        console.log(page);
      },
      pageSize: 6,
    };
    // const actions: Record<string, string>[] = [
    //   { type: "StarOutlined", text: "156" },
    //   { type: "LikeOutlined", text: "156" },
    //   { type: "MessageOutlined", text: "2" },
    // ];
    //定义ebooks变量
    const ebooks = ref();
    //分类相关
    const level1 = ref();
    /*
     * 查询所有分类*/
    const handleQueryCategory = () => {
      axios.get("/category/getCategoryList").then((resp) => {
        const data = resp.data;
        if (data.success) {
          console.log(data.content);
          console.log("原始数组：", data.content);
          level1.value = [];
          level1.value = Tool.array2Tree(data.content, 0);
          console.log("树形结构：", level1);
        } else {
          message.error(data.message);
        }
      });
    };
    //欢迎提示语的变量
    const isShowWelcome = ref(false);
    // 菜单点击触发的操作函数
    const handleClick = (value: any) => {
      console.log("点击选中处理-----" + value.key);
      isShowWelcome.value = false;
      //根据id进行查询
      if (value.key == "welcome") {
        //欢迎按钮-菜单
        isShowWelcome.value = true;
      } else {
        //二级菜单点击
        isShowWelcome.value = false;
        //发起查询，查询数据
        axios
          .get("/ebook/query", {
            params: {
              page: 1,
              size: 6,
              category2_id: value.key,
            },
          })
          .then(function (resp) {
            console.log(resp);
            ebooks.value = resp.data.content.list;
          });
      }
    };
    //挂载的生命周期
    onMounted(() => {
      //调用查询分类信息
      handleQueryCategory();
      //get(url、参数列表).then(回调函数)
      axios.get("/ebook/queryALL").then(function (resp) {
        console.log(resp);
        ebooks.value = resp.data.content;
      });
    });
    //返回数据
    return {
      ebooks,
      // actions,
      pagination,

      level1,
      handleQueryCategory,
      handleClick,
      isShowWelcome,
    };
  },
});
</script>

<style scoped>
.ant-avatar {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 8%;
  margin: 5px 0;
}
</style>
